<template>
    <div class="container">
      <div class="top">
        <!-- 左上角天气预报板块 -->
        <div class="left">
          <div class="toptitle">
            <div class="titletext">天气预报</div>
            <hr />
          </div>
          <WeatherWidget />
        </div>
        <!-- 右上角气象指标板块 -->
        <div class="right">
          <div class="toptitle">
            <div class="titletext">气象指标</div>
            <hr />
          </div>
          <WeatherIndicatorsWithData />
        </div>
      </div>
  
      <!-- 底部环境监测板块 -->
      <div class="bottom">
        <div class="toptitle">
          <div class="titletext">环境监测</div>
          <hr />
        </div>
        <EnvironmentalMonitoringWithData />
      </div>
    </div>
  </template>
  
  <script setup>
  import WeatherWidget from "@/components/Weather/change1/index.vue";
  import WeatherIndicatorsWithData from "@/components/WeatherIndicators/index.vue"; // 引入气象指标组件
  import EnvironmentalMonitoringWithData from "@/components/EnvironmentalMonitor/index.vue"; // 引入环境监测组件
  </script>
  
  <style lang="scss" scoped>
  @use "@/styles/themes.scss";
  .container {
    width: 100%;
    height: 98%;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .toptitle {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
  
    .titletext {
      border-left: 3px solid var(--primary-color);
      padding-left: 20px;
    }
  
    hr {
      background-color: rgb(194, 194, 194);
      height: 1px;
      border: none;
    }
  }
  
  .top {
    width: 100%;
    height: 63%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  
    .left {
      width: 25%;
      height: 98%;
      border: 1px solid #e0e0e0;
      background: white;
      border-radius: 12px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    }
  
    .right {
      width: 74%;
      height: 98%;
      border: 1px solid #e0e0e0;
      background: white;
      border-radius: 12px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
  
  
  .bottom {
    width: 100%;
    height: 30%;
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 10px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  .bottom .toptitle {
    margin-top: 0;
    margin-bottom: -10px;
  }
  
  .bottom > .monitor-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  </style>
  